<template>
  <view class="list">
    <view
      :class="['item', item.open_status ? '' : 'diabled']"
      v-for="item of items"
      :key="item.id"
      @click="Emit.$emit('handle', 'goItem', item)"
    >
      <view class="img">
        <image mode="aspectFill" :src="item.logo" lazy-load></image>

        <view class="tag"> {{ item.open_status ? "可服务" : "已下线" }} </view>
      </view>

      <view class="con">
        <view class="flex">
          <view class="name"> {{ item.name }} </view>
          <view class="time">可预约 · {{ item.begin_time }}</view>
        </view>

        <view class="conBd flex">
          <view class="conBdLet">
            <view class="score">{{ item.star }}分</view>
            <view>· 已服务{{ item.order_num }}单</view>
          </view>

          <view class="distance"
            ><i class="iconfont icon-map-filling1"></i> {{ item.distance }}
          </view>
        </view>

        <view class="conFd flex">
          <view class="let">
            <view class="letHd">
              <view v-if="hasShowTag(item.certified, '1')">实名认证</view>
              <view v-if="hasShowTag(item.certified, '2')">资质认证</view>
              <view v-if="hasShowTag(item.certified, '3')">照片</view>
            </view>
            <view class="letBd">
              <view class="num"
                >评价<view>{{ item.comment_num }}</view></view
              >
              <view class="num"
                >收藏<view>{{ item.favorite_num }}</view></view
              >
            </view>
          </view>

          <view class="btn">
            <template v-if="item.open_status">
              <view class="btnHd">可预约 · {{ item.begin_time }}</view>
              <view class="btnBd">立即预约</view>
            </template>
            <template v-else>
              <view class="btnHd">已下线</view>
              <view class="btnBd">暂无预约</view>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  computed: {
    hasShowTag() {
      return (str, key) => {
        return str.indexOf(key) !== -1;
      };
    },
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.list {
  padding: 0 24rpx 24rpx;

  .item {
    display: flex;
    margin-bottom: 24rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
  }

  .img {
    position: relative;
    margin-right: 20rpx;
    width: 180rpx;
    height: 180rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      background: #000;
    }

    .tag {
      position: absolute;
      left: -4rpx;
      top: 2rpx;
      padding: 2rpx 10rpx;
      font-size: 20rpx;
      color: #fff;
      font-weight: bold;
      background: linear-gradient(270deg, #fe4638 0%, #fe6e2b 100%);
      border-radius: 10rpx 10rpx 10rpx 0rpx;

      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        border-top: 2px solid #f0250e;
        border-left: 2px solid transparent;
      }
    }
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .con {
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .name {
    font-size: 30rpx;
    font-weight: bold;
    flex: 1;
    overflow: hidden;
    color: #262626;
  }

  .conBdLet {
    display: flex;
    align-items: center;
    padding: 12rpx 0;

    .score {
      color: #f85809;
      font-weight: bold;
      font-size: 30rpx;
    }
  }

  .distance {
    display: flex;
    align-items: center;
    color: #f85809;

    .iconfont {
      position: relative;
      top: 2rpx;
      font-size: 34rpx;
    }
  }

  .conFd {
    .let {
      flex: 1;
      overflow: hidden;

      .letHd {
        display: flex;
        flex-wrap: wrap;

        view {
          margin: 0 10rpx 10rpx 0;
          padding: 2rpx 6rpx;
          border-radius: 4rpx;
          border: 1rpx solid #b6b6b6;
        }
      }

      .letBd {
        display: flex;
        flex-wrap: wrap;

        .num {
          display: flex;
          margin-right: 24rpx;
          view {
            margin-left: 5rpx;
            font-weight: bold;
            color: #262626;
          }
        }
      }
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 170rpx;
      height: 78rpx;
      margin-left: 10rpx;
      background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(240, 37, 14, 0.2);
      border-radius: 20rpx;
      color: #fff;
      box-sizing: border-box;

      .btnHd {
        font-size: 18rpx;
      }

      .btnBd {
        font-size: 24rpx;
        font-weight: bold;
      }
    }
  }

  .diabled {
    .tag {
      background: #b6b6b6;

      &:after {
        border-top-color: #262626;
      }
    }

    .btn {
      background: #b6b6b6;
      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(137, 137, 137, 0.2);
    }
  }
}
</style>
